:root {
  --context-menu-box-shadow: rgba(0, 0, 0, 0.2);
  --context-menu-border: #c5c5c5;
  --context-menu-background: #ffffff;
  --context-menu-hover-color: var(--el-color-primary);
  --context-menu-hover-background: #dfedfd;

  --chat-list-text-color: #999999;
  --chat-list-hover-background: #eff0f1;
  --chat-list-active-background: #eff0f1;
  --chat-list-sticky-background: #e1dedd;

  --chat-message-box-background: #ffffff;
  --chat-message-box-shadow: rgba(0, 0, 0, 0.1);
  --chat-message-hover-background: rgba(224, 224, 224, 0.5);
  --chat-message-box-self-background: #c9e7ff;
  --chat-message-box-other-background: #ccf7ff;
  --chat-message-box-reply-background: rgba(215, 228, 233, 0.5);
  --chat-message-input-box-background: #f5f5f5;
  --chat-message-input-background: #ffffff;
}

html.dark {
  --context-menu-box-shadow: rgba(255, 255, 255, 0.2);
  --context-menu-border: #353535;
  --context-menu-background: #1c1b22;
  --context-menu-hover-color: var(--el-color-primary);
  --context-menu-hover-background: #252525;

  --chat-list-text-color: #bbbbbb;
  --chat-list-hover-background: #2a2c2d;
  --chat-list-active-background: #2a2c2d;
  --chat-list-sticky-background: #1e2122;

  --chat-message-box-background: #1d1e1f;
  --chat-message-box-shadow: rgba(0, 0, 0, 0.9);
  --chat-message-hover-background: rgba(28, 28, 28, 0.5);
  --chat-message-box-self-background: #242b32;
  --chat-message-box-other-background: #243231;
  --chat-message-box-reply-background: #252b2c;
  --chat-message-input-box-background: #1d1e1f;
  --chat-message-input-background: #1d1e1f;
}
